<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我与小风车的故事 - QQ群年度回顾</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="@/asserts/font-awesome.min.css" rel="stylesheet">
    <script src="@/asserts/chart.umd.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2A5298',
                        secondary: '#8A2BE2',
                        accent: '#FFA500',
                        dark: '#1A1A2E',
                        light: '#F5F5F7'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .text-shadow-lg {
                text-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
            }
            .bg-gradient-qq {
                background: linear-gradient(135deg, #2A5298 0%, #8A2BE2 100%);
            }
            .hover-scale {
                transition: transform 0.3s ease;
            }
            .hover-scale:hover {
                transform: scale(1.03);
            }
            .card-shadow {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .timeline-line {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 20px;
                width: 2px;
                background-color: #2A5298;
            }
            .timeline-dot {
                position: absolute;
                left: 14px;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                background-color: #8A2BE2;
                border: 2px solid white;
            }
        }
    </style>
</head>
<body class="font-inter bg-light text-dark">
<div id="app"></div>
<script type="module" src="./src/main.js"></script>
</body>
</html>